<template>
    <div class="cinema">
        <div class="theader">
            <img src=""
                alt="" @click="goBack" />
            <div class="title">电影院</div>
            <div class="city-btn" @click="gotoUrl">
                {{ route.query.cityname ? route.query.cityname : store.state.choseCityInfo.name }}
            </div>
        </div>

        <div class="clist">
            <div class="cineam" v-for="(item, index) in cinemasList" :key="'P1' + index">
                <div class="line">
                    <p class="name">{{ item.name }}</p>
                    <p class="price">￥ {{ formatPrice(item.lowPrice) }} 起</p>
                </div>
                <div class="line">
                    <p class="address">{{ item.address.length > 20 ? item.address.slice(0, 20) + '...' : item.address }}</p>
                    <p class="distance">{{ formatDistance(item.Distance) }} km</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// 1. 写静态页面，做成组件进行组合
// 配置路由 动态路由、嵌套路由，组件的粒度原则（只要是你觉得能拆分，那么拆分吧）
// 2. 配置 API 接口
// 基础 axios 配置，请求拦截、响应拦截、Urls 配置、API 集中管理、看后端文档、PostMan 测试
// 3. 创建响应式数据对象，并渲染到页面上
// 计算属性、watch 监听、生命周期钩子函数、Vuex 状态管理
// 4. 对接口返回的数据，进行清洗二次加工
// 过滤器 V3 直接定义方法
// 5. 对页面的其他逻辑功能进行优化完善，数据通信
// 第三方插件调用、其他的 UE 操作 UI 静态页面
import { ref } from 'vue'

import { getCinemasList } from '../api/apis'
import { CinemaType } from '../types'
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const cinemasList = ref<Array<CinemaType>>([])

const getCinemaListIno = async (cityId: string) => {
    let res = await getCinemasList(cityId);
    cinemasList.value = res.data.cinemas;
}

const route = useRoute()
const store = useStore()

const cityid = route.query.cityid ? route.query.cityid : store.state.choseCityInfo.id

getCinemaListIno(cityid as string)

const router = useRouter()
const goBack = () => {
    router.back();
}
const gotoUrl = () => {
    router.push('/citys')
    // 直接修改数据，严重不推荐，错误做法
    // 1. 直接修改，并没有遵守调用集中修改方法的规则，比较散乱
    // 2. 直接修改，在 mountations 就没有了任何的修改记录，对于非常高阶的开发，排查错误不太友好
    // store.state.choseCityInfo = {
    //     id: '110100',
    //     name: '哈哈'
    // }
    // 使用 commit 提交 同步修改
    // 虽然已经遵守了提交规则，但是，如果是异步操作之后提交的话，修改记录状态顺序因为异步可能会有异常，对于排查错误不太友好
    // store.commit('SETCITY', {
    //     id: '110100',
    //     name: '嘿嘿'
    // })

    // 使用 dispatch 提交 异步修改
    // store.dispatch("setcity", {
    //     id: '110100',
    //     name: "唧唧"
    // })
}

// 格式化价格
const formatPrice = (val: number): string => {
    return (val / 100).toFixed(1);
}
// 格式化距离
const formatDistance = (val: number): string => {
    return val.toFixed(2);
}



</script>

<style lang="scss" scoped>
.theader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background: #fcfcfc;

    img {
        width: 28px;
        margin-left: 20px;
    }

    .title {
        color: #666;
    }

    .city-btn {
        margin-right: 20px;
        color: #555;
        background: #ddd;
        padding: 3px 10px;
    }
}

.clist {
    .cineam {
        padding: 15px;
        border-bottom: 1px solid #eee;

        .line {
            height: 24px;
        }

        .name {
            color: #191a1b;
            font-size: 15px;
            float: left;
        }

        .price {
            color: #ff5f16;
            font-size: 10px;
            float: right;
        }

        .address {
            color: #797d82;
            font-size: 12px;
            margin-top: 5px;
            float: left;
        }

        .distance {
            color: #797d82;
            font-size: 12px;
            margin-top: 5px;
            float: right;
        }
    }
}
</style>